<template>
    <div style="position:relative;">
        <div class="t-search-wrap">
            <h4 class="t-search-title">
                {{ searchTitle || $t('components.tableSearch.search') }}
                <slot name="search-title"></slot>
            </h4>
            <div>
                <div class="t-search-item-wrap">
                    <div class="t-search-item" v-for="(column,index) in searchCol" :key="index" v-if="!column.hide">
                        <label
                            :style="{
                                'padding-left': column.type == 'titleEdit' ? 0 : '20px',
                            }"
                            v-if="column.type == 'titleEdit'" class="t-search-label">
                            <slot :name="column.title" :item="column"></slot>
                        </label>
                        <label v-else-if="!column.hideLabel" class="t-search-label">{{column.title}}：</label>
                        <div class="t-search-input">
                            <slot :name="column.key" :item="column"></slot>
                        </div>
                    </div>
                    <div class="t-search-btn-wrap">
                        <slot name="button"></slot>
                    </div>
                  <div class="t-search-btn-wrap">
                        <slot name="buttonI"></slot>
                    </div>
                </div>
            </div>
            <slot name="search-footer"></slot>
        </div>
    </div>
</template>

<script>
export default {
  name: 'TableSearch',
  props: {
    searchTitle: {
        type: String,
        default: '',
    },
    searchCol: {
      type: Array,
      required: true
    }/*
            // 数值且有默认值
            searchList: {
                type: Array,
                default: []
            } */
  },
  created(){
  },
  data () {
    return {

    }
  },
  methods: {

  }
}
</script>

<style>

    /*列表顶部搜索栏公共样式*/
    .t-search-wrap{
        border:1px solid #ccc;
        padding:2px;
        margin-bottom:10px;
    }
    .t-search-wrap .t-search-title{
        margin:0;
        padding:6px 10px;
        background:#929fac;
        color:#fff;
    }
    .t-search-item-wrap{
        padding-right:6%;
        padding-top:10px;
        padding-bottom:10px;
        display: flex;
        flex-wrap: wrap;

    }
    .t-search-item{
        display: flex;
        align-items: center;
        /* width:25%; */
        box-sizing: border-box;
        /* min-width:220px; */
        margin:10px 0;

    }
    .t-search-item .t-search-label{
        display: inline-block;
        /* width:45%; */
        text-align: right;
        margin-right:6px;
        padding-left: 20px;
    }
    .t-search-item .t-search-input{
        flex:1;
    }

    .t-search-btn-wrap{
        box-sizing: border-box;
        /* flex:1; */
        align-self: center;
        margin:10px 0;
        text-align: right;
        /* min-width:200px; */
    }

</style>
